import { HomeOutlined, MinusOutlined, PlusOutlined, SettingOutlined } from "@ant-design/icons"
import { ProCard } from "@ant-design/pro-components"
import { PageContainer } from "@ant-design/pro-layout"
import ProList from "@ant-design/pro-list"
import { useAxiosGet, useParams } from "@sker/sdk"
import { renderAdminPage, useWebSocket } from "@sker/ui"
import { Button, Space, Tabs, Tag } from "antd"
import { useEffect, useState } from "react"

export const FilesPage: React.FC<{}> = ({ }) => {
    const { params, onChange } = useParams<any>({
        uid: `all`
    })
    const { fetch: fetchDeviceList } = useAxiosGet('autojs/core/web/device/deviceList')
    const { fetch: fetchUserList, data: userList } = useAxiosGet('autojs/core/web/user/userList')
    useEffect(() => {
        fetchUserList();
    }, [])
    const getStatus = (status: string) => {
        switch (status) {
            case '0':
                return `离线`
            case `1`:
                return `在线`
            default:
                return `未知`
        }
    }
    const getStatusColor = (status: string) => {
        switch (status) {
            case '0':
                return `default`
            case `1`:
                return `success`
            default:
                return `danger`
        }
    }
    return <PageContainer title={'控制中心'}>
        <Tabs activeKey={params.uid} onChange={e => {
            onChange({ uid: e })
        }} items={[{ label: '全部设备', key: 'all' }, ...(userList?.data || []).map(it => ({ label: it.username, key: `${it.id}` }))]}></Tabs>
        <div className="h-24px"></div>
        <ProList grid={{
            gutter: 16
        }} params={params} renderItem={(item, index) => {
            return <div className="px-6px px-12px mt-12px">
                <ProCard
                    className="bg-white"
                    bordered
                    hoverable
                    title={item.device_name}
                    subTitle={<Tag color={getStatusColor(item.status)}>{getStatus(item.status)}</Tag>}
                    extra={<>
                        <a><SettingOutlined /></a>
                    </>}
                >
                    <div className="flex center">
                        <Space.Compact>
                            <Button icon={<PlusOutlined />}></Button>
                            <Button icon={<HomeOutlined />}></Button>
                            <Button icon={<MinusOutlined />}></Button>
                        </Space.Compact>
                    </div>
                </ProCard>
            </div>
        }} request={(params) => fetchDeviceList(params)}></ProList>
    </PageContainer>
}
renderAdminPage(FilesPage, 'autojs/core/web/device')
